<template>
  <div class="summary">
    <div class="card border-bottom">
      <div class="card-item">
        <div>
          <span class="score">4.9</span>
          <span class="txt">分</span>
          <span class="desc">很棒</span>
        </div>
        <div>
          <span>5687条评论</span>
          <span>5条攻略</span>
          <span class="arrow-icon iconfont">&#xe62d;</span>
        </div>
        <div></div>
      </div>
      <div class="card-item">
        <div class="title">景点简介</div>
        <div>
          <span>开放时间、贴士</span>
          <span class="arrow-icon iconfont">&#xe62d;</span>
        </div>
      </div>
    </div>
    <div class="address">
      <span class="iconfont">&#xe63f;</span>
      <div class="addr-text">
        <span>
          辽宁省大连市沙河口区中山路608-6-8号（星海广场西500米，星海公园内）
        </span>
      </div>
      <div class="arrow-icon iconfont">&#xe62d;</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailSummary'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .arrow-icon
    font-size .24rem
    color $lightTextColor
  .summary
    background #fff
    padding .1rem .2rem
    .card
      display flex
      .card-item
        flex 1
        position relative
        padding .1rem 0 .2rem 0
        span
          font-size .24rem
          color $lightTextColor
        .score
          font-size .48rem
          color $highlightTextColor
        .txt
          color $highlightTextColor
        .desc
          color $highlightTextColor
        .title
          line-height .48rem
        .arrow-icon
          position absolute
          top 40%
          right .2rem
    .address
      display flex
      padding .3rem 0
      .arrow-icon
        padding-right .2rem
      .addr-text
        flex auto
        padding 0 .1rem
      .arrow-icon
        width .32rem
</style>
